<template>
    <view class="content">
        <a-demo title="基础使用">
            <pure-cell title="一个基础的单元格"></pure-cell>
        </a-demo>

        <a-demo title="描述内容">
            <pure-cell title="带描述内容的单元格" desc="我是描述内容"></pure-cell>
        </a-demo>

        <a-demo title="右侧箭头">
            <pure-cell title="右侧箭头" desc="单元格描述内容" arrow></pure-cell>
            <a-gap></a-gap>
            <pure-cell title="右侧箭头" desc="支持箭头旋转" arrow :rotate="rotate" tip="点击切换右侧箭头旋转状态"
                @onClick="handleRotateClick"></pure-cell>
        </a-demo>

        <a-demo title="左侧图标">
            <pure-cell title="带左侧图标的单元格" desc="单元格描述内容" arrow icon="__huiyuan_2"></pure-cell>
            <a-gap></a-gap>
            <pure-cell title="带左侧图标的单元格" desc="单元格描述内容" arrow icon="/static/icons/button.png" tip="我是提示内容"></pure-cell>
        </a-demo>

        <a-demo title="提示内容">
            <pure-cell title="带提示内容的单元格" desc="单元格描述内容" arrow icon="__huiyuan_2" tip="我是提示内容"></pure-cell>
            <a-gap></a-gap>
            <pure-cell title="带提示内容的单元格" desc="单元格描述内容" arrow icon="/static/icons/button.png" tip="我是提示内容"></pure-cell>
        </a-demo>

        <a-demo title="左侧图片" desc="利用图标支持图片的特性" class="left-big-image">
            <pure-cell title="单元格标题" desc="单元格描述" arrow icon="/static/icons/block.png" tip="单元格提示"></pure-cell>
        </a-demo>

        <a-demo title="自定义右侧内容" desc="使用插槽自定义右侧内容" class="left-big-image">
            <pure-cell title="结合标签使用" desc="单元格描述" arrow icon="/static/icons/block.png" tip="单元格提示">
                <template #desc>
                    <pure-tag class="pure-tag-warning" text="标签" dot></pure-tag>
                </template>
            </pure-cell>
            <a-gap></a-gap>
            <pure-cell title="结合开关选择器使用" desc="单元格描述" class="left-big-image" arrow icon="/static/icons/block.png"
                tip="单元格提示" @onClick="handleCellClick">
                <template #desc>
                    <pure-switch v-model="checked" openText="开" closeText="关" @tap.stop></pure-switch>
                </template>
            </pure-cell>
        </a-demo>

        <a-demo title="提示脱离内容" desc="让提示单独占用一行，不合内容在一起">
            <pure-cell title="结合标签使用" desc="单元格描述" arrow icon="/static/icons/block.png" tip="单元格提示" tipOutside>
                <template #desc>
                    <pure-tag class="pure-tag-warning" text="标签" dot></pure-tag>
                </template>
            </pure-cell>
            <a-gap></a-gap>
            <pure-cell title="结合开关选择器使用" desc="单元格描述" arrow icon="/static/icons/block.png" tip="单元格提示"
                @onClick="handleCellClick" tipOutside>
                <template #desc>
                    <pure-switch v-model="checked" openText="开" closeText="关" @tap.stop></pure-switch>
                </template>
            </pure-cell>
        </a-demo>

        <a-demo title="边框">
            <view class="cell-group pure-cell-border-top">
                <pure-cell title="单元格边框" desc="单元格描述内容" arrow icon="__huiyuan_2"></pure-cell>
                <pure-cell title="单元格边框" desc="单元格描述内容" arrow icon="/static/icons/button.png" tip="我是提示内容"></pure-cell>
                <pure-cell title="单元格边框" desc="单元格描述内容" arrow icon="__huiyuan_2"></pure-cell>
                <pure-cell title="单元格边框" desc="单元格描述内容" arrow icon="__huiyuan_2"></pure-cell>
            </view>
        </a-demo>
    </view>
</template>

<script setup>
import { ref } from "vue";
const rotate = ref(90);
const checked = ref(true);

// 单元格点击事件
function handleCellClick() {
    console.log("点击了单元格");
}

// 旋转
function handleRotateClick() {
    if (rotate.value === 0) rotate.value = 90;
    else rotate.value = 0;
}
</script>

<style scoped>
.left-big-image {
    --pure-cell-icon-font-size: 30px;
}

.cell-group {
    padding: 0 1em;
    background: var(--pure-background-element);
    border-radius: 5px;
    --pure-cell-padding: 1em 0;
}
</style>
